<template>
	<div>
		<table border>
			<slot></slot>
			<thead>
				<tr>
					<th v-for="(column, index) in columns" :key="index">{{ column.label }}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(columns, index) in rows" :key="`tr-${index}`">
					<td v-for="column in columns" :key="`td-${column.value}`">{{ column.value }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	props: {
		tableData: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			columns: []
		};
	},
	computed: {
		rows() {
			// 返回有多少行的数据
			return this.tableData.map(item => {
				// 每一行里有多少列
				return this.columns.map(column => {
					return { value: item[column.prop] };
				});
				// map方法返回的是一个数组[]
				// 对象与表头内容一一对应
				// [[{},{},{}],[],[]]
			});
		}
	},
	mounted() {
		console.log(this.rows);
	}
};
</script>

<style lang="scss" scoped></style>